<template>
	<view>
		<view class="main">
			<view class="top">
				<text class="top-text">团体入园凭证</text>
			</view>
			<view class="time">
				<text class="time-text">2024年9月{{day}} {{period}}</text>
			</view>
			<view class="yuyue1">
				<text class="yuyue-text">预约信息</text>
			</view>
			<view>
				<uni-card class="card">
					<view class="msg">团体名称：{{record[1].team1.tname}}</view>
					<view class="msg">团体人数：{{record[1].team1.number}}</view>
				</uni-card>
			</view>
				<view class="yuyue2">
					<text class="yuyue-text">预约信息</text>
				</view>
				<view>
					<uni-card class="card">
						<view class="msg">姓名：{{record[1].team1.pname}}</view>
						<view class="msg">证件类型：{{record[1].team1.card_type}}</view>
						<view class="msg">证件号码：{{record[1].team1.card}}</view>
						<view class="msg">手机号码：{{record[1].team1.phone}}</view>
					</uni-card>
					<view class="huacao">
						<text class="huacao-text">园区花草，种植不易请爱护</text>
					</view>
			</view>
		</view>
		<view class="bottom">
      <text class="bottom-text1">离凭证消失剩余</text>
      <text class="bottom-text2">{{ days }}天 {{ hours }}小时 {{ minutes }}分钟 {{ seconds }}秒</text>
      <text class="bottom-text1">。可发起新的预约</text>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue'
import data from '../../data/y_data.json'

let record = ref([])
record = data.record

let day =sessionStorage.getItem("day")
let period = sessionStorage.getItem("period")


  import {  onMounted, onBeforeUnmount } from 'vue';

  const countdown = ref(60 * 60 * 24 * 3 + 60 * 60 * 2 + 60 * 5); // 倒计时时间，以秒为单位，例如3天2小时5分钟

  const days = ref(0);
  const hours = ref(0);
  const minutes = ref(0);
  const seconds = ref(0);

  let timer = null;

  const startCountdown = () => {
  timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
      days.value = Math.floor(countdown.value / (60 * 60 * 24));
      hours.value = Math.floor((countdown.value % (60 * 60 * 24)) / (60 * 60));
      minutes.value = Math.floor((countdown.value % (60 * 60)) / 60);
      seconds.value = countdown.value % 60;
    } else {
      clearInterval(timer);
    }
  }, 1000);
};

  onMounted(() => {
  startCountdown();
});

  onBeforeUnmount(() => {
  if (timer) {
  clearInterval(timer);
}
});


</script>

<style scoped>
	.main {
    width: 95%;
    height:600px ;
    margin:0 12px;
    background-image: url('../../static/back@2x.png');
    background-size: cover;
    Background-repeat: no-repeat;
	}
  .top{
    text-align: center;
    padding-top: 33px;
  }
  .top-text{
    opacity: 0.9;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 20px;
    color: #000000;
    letter-spacing: 0;
    text-align: center;
    line-height: 20px;
  }
  .time{
    text-align: center;
    margin-top: 20px;
  }
  .time-text{
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #5F5F5F;
    letter-spacing: 0;
  }
  .yuyue1{
    margin-left: 16px;
    margin-top: 43px;
  }
  .yuyue-text{
    font-family: PingFangSC-Medium;
    font-weight: 700;
    font-size: 15px;
    color: #000000;
    letter-spacing: 0;
  }
  .yuyue2{
    text-align: left;
    margin-left: 15px;
    margin-top: 14px;
  }
  .msg{
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 15px;
    color: #000000;
    letter-spacing: 0;
    margin-bottom: 13px;
  }
	.card{
    width: 87%;
    border-radius: 12px;
    margin-left: 16px;
	}
	.huacao{
    margin-top: 50px;
    text-align: center;
	}
	.huacao-text{
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #5F5F5F;
		letter-spacing: 0;
	}
	.bottom{
    margin-top: 40px;
    height: 48px;
    text-align: center;
	}
	.bottom-text1{
		color: #5f5f5f;
		 font-size: 12px;
		 font-face: PingFangSC;
		 font-weight: 400;
		 line-height: 0;
		 letter-spacing: 0;
		 paragraph-spacing: 0;
		 text-align: left;
	}
	.bottom-text2{
		color: #8dcb6d;
		 font-size: 12px;
		 font-face: PingFangSC;
		 font-weight: 400;
		 line-height: 0;
		 letter-spacing: 0;
		 paragraph-spacing: 0;
		 text-align: left;
	}
</style>